<template>
  <div class="center_bottom">
    <Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
  </div>
</template>

<script>

import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {}
    };
  },
  props: {},
  watch: {
    "$store.state.setting.lastSEIASComputed.emisCost": {
      deep: true,
      handler(newValue, oldValue) {
        this.getData(newValue);
      }
    }
  },
  mounted() {
    this.getData(this.$store.state.setting.lastSEIASComputed.emisCost);
  },
  methods: {
    getData(newValue) {
      let res = newValue;
      res.category = this.$store.state.setting.lastSEIASData.selectOptions.deliveryYear;
      this.init(res);
    },
    init(newData) {
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF"
          },
          formatter: function(params) {
            // 添加单位
            var result = params[0].name + "<br>";
            params.forEach(function(item) {
              if (item.seriesName == "Decarbon Efficiency") {
                  result +=
                    item.marker +
                    " " +
                    item.seriesName +
                    " : " +
                    Number(item.value).toFixed(1)  +
                    "%</br>";
                } else {
                  result +=
                    item.marker +
                    " " +
                    item.seriesName +
                    " : " +
                    Number(item.value).toFixed(1) +
                    "</br>";
                }            
            });
            return result;
          }
        },
        legend: {
          data: [
            "Decarbon CO2",
            "Original CO2",
            "Decarbon ME CO2",
            "Decarbon Efficiency"
          ],
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0"
        },
        grid: {
          left: "50px",
          right: "40px",
          bottom: "30px",
          top: "20px"
        },
        xAxis: {
          data: newData.category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },

            axisLabel: {
              formatter: "{value}"
            }
          },
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              formatter: "{value}% "
            }
          }
        ],
        series: [
          {
            name: "Decarbon CO2",
            type: "bar",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(112,173,71,0.9)" },
              ])
            },
            z: -12,
            data: newData.totalDecarbonCO2
          },
          {
            name: "Original CO2",
            type: "bar",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(156,107,211,0.8)" },
                { offset: 0.2, color: "rgba(156,107,211,0.5)" },
                { offset: 1, color: "rgba(156,107,211,0.2)" }
              ])
            },
            z: -12,
            data: newData.totalOrigCO2
          },
           {
            name: "Decarbon ME CO2",
            type: "line",
            //smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            // yAxisIndex: 1,
            itemStyle: {
              color: "#67E0E3"
            },
            data: newData.decarbonMECO2
          },
          {
            name: "Decarbon Efficiency",
            type: "line",
            //smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              color: "#F02FC2"
            },
            data: newData.totalDecarbonEfficiency
          },
          
        ]
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
